<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../inc/js.jsp"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>预警消息查询</title>
    <jsp:include page="../inc/css.jsp"/>
    <style type="text/css">
        .dataLeftTd {
            text-align: right;
            padding-right: 5px;
            width: 32%;
        }

        .dataRightTd {
            text-align: left;
            padding-left: 5px;
            width: 18%;
        }

        .dataSplitSpan {
            margin-right: 15px;
        }

        .searchDiv {
            margin-top: 10px;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <jsp:include page="../inc/menu.jsp"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="margin-top: 10px">
                        <!-- /.card-header -->
                        <div class="card-header">
                            <div class="form-inline">
                                <div class="form-group searchDiv">
                                    <select id="companyList" class="form-control" style="margin-right: 10px;" onchange="_alarmRecordList.fn.getDeviceList()">
                                        <option value="">全部公司</option>
                                    </select>
                                </div>

                                <div class="form-group searchDiv">
                                    <select id="deviceList" class="form-control" style="margin-right: 10px;">
                                        <option value="">全部设备</option>
                                    </select>
                                </div>

                                <div class="form-group searchDiv">
                                    <select id="typeList" class="form-control" style="margin-right: 10px;">
                                        <option value="2011">实时预警消息</option>
                                        <option value="2051">分钟预警消息</option>
                                        <option value="2061">小时预警消息</option>
                                        <option value="2031">日均预警消息</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-inline">
                                <div class="form-group searchDiv">
                                    <input id="startTime" readonly placeholder="起始时间" class="form-control" style="margin-right: 10px;width: 150px;"/>
                                </div>
                                <span style="margin-top: 10px;margin-right: 10px;">~</span>
                                <div class="form-group searchDiv">
                                    <input id="endTime" readonly placeholder="截止时间" class="form-control" style="margin-right: 10px;width: 150px;"/>
                                </div>

                                <div class="form-group searchDiv">
                                    <input id="searchKeyWord" placeholder="参数代码或预警内容" class="form-control" style="width: 200px;"/>
                                </div>

                                <button type="button" title="查询" class="btn btn-success searchDiv" style="margin-left: 10px;" onclick="_alarmRecordList.fn.reloadData()">查询</button>

<%--                                <button type="button" title="导出" class="btn btn-info searchDiv" style="margin-left: 10px;" onclick="_alarmRecordList.fn.exportData()">导出</button>--%>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width: 99%">
                                    <colgroup>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th style="max-width: 160px">参数名称</th>
                                        <th style="max-width: 160px">参数单位</th>
                                        <th style="max-width: 100px">阈值</th>
                                        <th>预警内容</th>
                                        <th style="max-width: 160px">记录时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
</div>
<!-- ./wrapper -->

<div class="modal inModal fade" id="deviceInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deviceInfoDataTitle">设备预警消息详情</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" id="deviceInfoDataDiv"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- page script -->
<script type="text/javascript">
    let _alarmRecordList = {
        v: {
            list: [],
            dTable: null,
            masterCompanyId: 0
        },
        fn: {
            init: function () {
                laydate.render({
                    elem: '#startTime'
                    , type: 'datetime'
                });

                laydate.render({
                    elem: '#endTime'
                    , type: 'datetime'
                });

                let masterCompanyId = $('#masterCompanyId').val();

                if (Number(masterCompanyId) > 0) {
                    _alarmRecordList.v.masterCompanyId = Number(masterCompanyId);

                    $('#companyList').css('display', 'none');
                    _alarmRecordList.fn.getDeviceList();
                } else {
                    _alarmRecordList.fn.getCompanyList();
                }

                _alarmRecordList.fn.dataTableInit();
            },
            getCompanyList: function () {
                $.post('common/companyList', {
                    id: 1
                }, function (result) {
                    if (result.length > 0) {
                        let content = '';
                        $.each(result, function (i, item) {
                            content += '<option value="' + item.id + '">' + item.name + '</option>';
                        });

                        $('#companyList').append(content);
                    } else {
                        info("暂无公司预警消息", "error");
                    }
                });
            },
            getDeviceList: function () {
                let companyId;

                if (_alarmRecordList.v.masterCompanyId > 0) {
                    companyId = _alarmRecordList.v.masterCompanyId;
                } else {
                    companyId = $('#companyList').val();
                }

                $('#deviceList').html('<option value="">全部设备</option>');

                if (null != companyId && companyId !== '') {
                    $.post('common/deviceList', {
                        companyId: companyId
                    }, function (result) {
                        if (result.length > 0) {
                            let content = '';
                            $.each(result, function (i, item) {
                                content += '<option value="' + item.code + '">' + item.name + '</option>';
                            });

                            $('#deviceList').append(content);
                        }
                    });
                } else {
                    $('#deviceList').html('<option value="">全部设备</option>');
                }
            },
            exportData: function () {
                let firstTime = $('#startTime').val();
                let lastTime = $('#endTime').val();
                let deviceCode = $('#deviceList').val();

                if (null == deviceCode || deviceCode === '') {
                    info('请先选择设备', 'warning');
                    return;
                }

                let url = 'backend/excel/exportDeviceData?deviceCode=' + deviceCode + '&type=' + $('#typeList').val() + '&keyWord=' + $('#searchKeyWord').val();

                if (firstTime.trim().length > 0) {
                    url += '&firstTime=' + firstTime;
                }

                if (lastTime.trim().length > 0) {
                    url += '&lastTime=' + lastTime;
                }

                window.location.href = url;
            },
            reloadData: function () {
                _alarmRecordList.v.list = [];
                _alarmRecordList.v.dTable.DataTable().ajax.reload(null, false);
            },
            dataTableInit: function () {
                _alarmRecordList.v.dTable = $tutu.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "autoWidth": true,//自动计算宽度
                    "lengthChange": false,//是否允许用户改变表格每页显示的记录数
                    "searching": false,
                    "ordering": false,
                    "ajax": {
                        "url": "backend/alarmMessage/list",
                        "type": "POST"
                    },
                    "language": $tutu.v.dataTableL,
                    "columns": [
                        {"data": "codeDictName"},
                        {"data": "codeDictUnit"},
                        {"data": "num"},
                        {"data": "description"},
                        {
                            "data": "createTime",
                            render: function (data) {
                                return crtTimeFtt(data, 10);
                            }
                        }
                    ],
                    /*添加小插件*/
                    "columnDefs": [],
                    /*展示预警消息格式化*/
                    "createdRow": function (row, data, index) {
                        _alarmRecordList.v.list.push(data);
                    },
                    /*回调函数*/
                    rowCallback: function (row, data) {

                    },
                    /*带参数*/
                    "fnServerParams": function (aoData) {
                        _alarmRecordList.v.list = [];
                        aoData.companyId = $('#companyList').val();
                        aoData.deviceCode = $('#deviceList').val();
                        aoData.type = $('#typeList').val();
                        aoData.keyWord = $('#searchKeyWord').val();
                        aoData.startTime = $('#startTime').val();
                        aoData.endTime = $('#endTime').val();
                    },
                    "fnDrawCallback": function (data) {
                        $tutu.uiForm(data);
                    }
                });
            }
        }
    };

    $(document).ready(function () {
        _alarmRecordList.fn.init();

        window.onload = function () {
            checkSelectMenu("alarmMessageLi");

            loadMenuColor('alarmMessageLi');
        };
    });
</script>
</body>
</html>